import { debounce } from "xb-js-utils";
import BackTop from "components/content/backTop/BackTop";
import { BACK_POSITION } from "./const";

// 对goodsListItem组件中图片加载完成的相关处理
export const itemListener = {
  data() {
    return {
      itemImgListener: null
    };
  },
  mounted() {
    // console.log("mixin-mounted");
    // 通过防抖函数包装 refresh，然后在监听图片加载完成的回调中调用。
    const refresh = debounce(this.$refs.scroll.refresh, 100);
    this.itemImgListener = () => {
      //   console.log("mixin-refresh::before");
      refresh();
    };
    // 监听item中图片加载完成,不要放在created里面，容易出错；
    this.$bus.$on("goodsItemImgLoad", this.itemImgListener);
  }
};

// 返回顶部显示/隐藏
export const backTop = {
  data() {
    return {
      isShowBackTop: false
    };
  },
  components: {
    BackTop
  },
  methods: {
    //回到顶部
    backTop() {
      /**
       * 返回顶部点击事件
       * 该事件在home中进行监听，而不在组件内部监听的原因：
       * 点击返回顶部按钮时，需要执行scroll组件中的方法，而BackTop组件和Scroll组件同级，不好操作，所以直接在home中进行监听；
       */
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    showBackTopListener(position) {
      /**
       * 监听滚动位置判断返回组件是否显示：
       * 返回布尔值；
       */
      this.isShowBackTop = -position.y > BACK_POSITION;
    }
  }
};
